import React, {Component} from 'react';
import {
    Text, TextInput, TouchableOpacity, View, Alert, StyleSheet, AsyncStorage, FlatList, Image,
    ScrollView, Clipboard
} from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';
import Toast from '@remobile/react-native-toast';
import {BasicStyle} from "../../../style/BasicStyle";
import FetchUtils from './../../utils/FetchUtils';
import utils from './../../utils/utils';

export default class MyOrderDedail extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        headerTitle: "订单详情",
        headerStyle: {
            backgroundColor: '#F6F6F6',
        },
        headerTitleStyle: {
            alignSelf: 'center',
            fontSize: utils.setSpText(17),
        },
        headerRight: <TouchableOpacity/>
    });

    constructor() {
        super();
        this.state = {
            orderDedail: '',
        }
    }

    componentDidMount() {
        if (this.props.navigation.state.params) {
            AsyncStorage.getItem("XToken").then((xToken) => {
                let params = {
                    orderId: this.props.navigation.state.params.orderId
                };
                FetchUtils.getWithHeader(utils.apiUrl + '/order', xToken, params, (res) => {
                    if (res.code === 200) {
                        this.setState({
                            orderDedail: res.apiData
                        })
                    } else {
                        Toast.showShortTop("请求错误：" + res.apiData);
                    }
                })
            })
        }
    }

    render() {
        return (
            <View style={BasicStyle.containerView}>
                <ScrollView showsVerticalScrollIndicator={false}
                            showsHorizontalScrollIndicator={false}
                            removeClippedSubviews={false}
                            style={{flex: 1}}
                >
                    {this.state.orderDedail.logisticsCom !== null ? this._makeLogisticsView(this.state.orderDedail) : null}
                    {this._makeAddressView(this.state.orderDedail)}
                    <View style={{
                        height: utils.autoheight(31),
                        justifyContent: 'center',
                        paddingLeft: utils.autoWidth(10)
                    }}><Text style={{fontSize: utils.setSpText(14), color: '#888888'}}>商品信息</Text></View>
                    {this.state.orderDedail !== '' ?
                        this._makeProductList(this.state.orderDedail.orderProductModelList)
                        :
                        null
                    }
                    {this.state.orderDedail !== '' ?
                        <View style={{
                            height: utils.autoheight(40),
                            backgroundColor: '#FFF',
                            flexDirection: 'row',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                        }}>
                            <View style={{marginLeft: utils.autoWidth(12)}}>
                                <Text style={BasicStyle.commonFontLittleText}>共 {this.state.orderDedail.shopCarNum}
                                    件</Text>
                            </View>

                            <View
                                style={{flexDirection: 'row', alignItems: 'center', marginRight: utils.autoWidth(30)}}>
                                <Text style={[BasicStyle.commonFontLittleText,]}>总计</Text>
                                <Text
                                    style={{
                                        fontSize: utils.setSpText(21),
                                        color: '#000'
                                    }}>￥{utils.toDecimal2(this.state.orderDedail.shopCarSumPrice)}</Text>
                            </View>
                        </View>
                        :
                        null
                    }
                    {this.state.orderDedail !== '' ? this._makeOrderView(this.state.orderDedail) : null}
                </ScrollView>
            </View>
        )
    }

    /*物流信息View*/
    _makeLogisticsView = (orderDedail) => {
        return <View>
            <View style={{
                height: utils.autoheight(31),
                justifyContent: 'center',
                paddingLeft: utils.autoWidth(10)
            }}><Text style={{fontSize: utils.setSpText(14), color: '#888888'}}>物流信息</Text></View>
            <View>
                <View style={{
                    flexDirection: 'row',
                    height: utils.autoheight(44),
                    alignItems: 'center',
                    paddingLeft: utils.autoWidth(20),
                    marginBottom: utils.autoheight(0.5),
                    backgroundColor: '#FFF'
                }}>
                    <Text style={BasicStyle.commonFontLittleText}>物流公司：</Text>
                    <TextInput style={[{flex: 1}, BasicStyle.commonFontLittleText]} underlineColorAndroid={'transparent'} editable={false}>{orderDedail.logisticsCom}</TextInput>
                </View>

                <View style={{
                    flexDirection: 'row',
                    height: utils.autoheight(44),
                    alignItems: 'center',
                    paddingLeft: utils.autoWidth(20),
                    paddingRight: utils.autoWidth(11),
                    backgroundColor: '#FFF'
                }}>
                    <View style={{flexDirection: 'row', flex: 1, alignItems: 'center',}}>
                        <Text style={BasicStyle.commonFontLittleText}>物流单号：</Text>
                        <TextInput style={[{flex: 1}, BasicStyle.commonFontLittleText]} underlineColorAndroid={'transparent'} editable={false}>{orderDedail.logisticsNum}</TextInput>
                    </View>
                    <TouchableOpacity style={{
                        width: utils.autoWidth(70),
                        height: utils.autoheight(30),
                        borderColor: '#000',
                        borderWidth: utils.autoWidth(1),
                        justifyContent: 'center',
                        alignItems: 'center'
                    }} onPress={() => {
                        Clipboard.setString(orderDedail.logisticsNum);
                        Clipboard.getString().then((text) => {
                            if(text === orderDedail.logisticsNum){
                                Toast.showShortBottom("复制成功")
                            }else {
                                Toast.showShortBottom("请重试")
                            }
                        })

                    }}>
                        <Text style={BasicStyle.commonFontLittleText}>复制</Text>
                    </TouchableOpacity>
                </View>
            </View>

        </View>
    };

    /*收货地址信息View*/
    _makeAddressView = (orderDedail) => {
        return <View>
            <View style={{
                height: utils.autoheight(31),
                justifyContent: 'center',
                paddingLeft: utils.autoWidth(10)
            }}><Text style={{fontSize: utils.setSpText(14), color: '#888888'}}>收货信息</Text></View>
            <View>
                <View style={{
                    flexDirection: 'row',
                    height: utils.autoheight(44),
                    alignItems: 'center',
                    paddingLeft: utils.autoWidth(20),
                    marginBottom: utils.autoheight(0.5),
                    backgroundColor: '#FFF'
                }}>
                    <Text style={BasicStyle.commonFontLittleText}>收货人：</Text>
                    <TextInput style={[{flex: 1}, BasicStyle.commonFontLittleText]} underlineColorAndroid={'transparent'}
                               editable={false}>{orderDedail.consignee}</TextInput>
                </View>

                <View style={{
                    flexDirection: 'row',
                    height: utils.autoheight(44),
                    alignItems: 'center',
                    paddingLeft: utils.autoWidth(20),
                    marginBottom: utils.autoheight(0.5),
                    backgroundColor: '#FFF'
                }}>
                    <Text style={BasicStyle.commonFontLittleText}>收货地址：</Text>
                    <TextInput style={[{flex: 1}, BasicStyle.commonFontLittleText]} underlineColorAndroid={'transparent'}
                               editable={false}>{orderDedail.address}</TextInput>
                </View>

                <View style={{
                    flexDirection: 'row',
                    height: utils.autoheight(44),
                    alignItems: 'center',
                    paddingLeft: utils.autoWidth(20),
                    marginBottom: utils.autoheight(0.5),
                    backgroundColor: '#FFF'
                }}>
                    <Text style={BasicStyle.commonFontLittleText}>联系手机：</Text>
                    <TextInput style={[{flex: 1}, BasicStyle.commonFontLittleText]} underlineColorAndroid={'transparent'}
                               editable={false}>{orderDedail.telephone}</TextInput>
                </View>
            </View>

        </View>
    };

    /*生成商品列表*/
    _makeProductList = (productList) => {
        let proListView = productList.map((productItem, index) => {
            return <TouchableOpacity key={index} style={{
                height: utils.autoheight(100),
                marginTop: utils.autoheight(0.5),
                marginBottom: utils.autoheight(0.5),
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
                backgroundColor: '#FFF'
            }} onPress={() => {
                let {navigate} = this.props.navigation;
                navigate('ShopDetailNav', {productId: productItem.productId})
            }
            }>
                <Image
                    style={{
                        height: utils.autoheight(75.2),
                        width: utils.autoWidth(70),
                        marginLeft: utils.autoWidth(14),
                        marginRight: utils.autoWidth(10)
                    }}
                    source={{uri: utils.qiniuUrl + productItem.mainImg + utils.qiniu200Url}}/>
                <View style={{flex: 1}}>
                    <Text style={BasicStyle.commonFontText}>{productItem.productName}</Text>
                    <Text
                        style={BasicStyle.commonFontLittleText}>“{productItem.productColor}”，“{productItem.productSize}”</Text>

                    <View style={{
                        flexDirection: 'row',
                        justifyContent: 'space-between',
                        paddingRight: utils.autoWidth(33)
                    }}>
                        <Text style={BasicStyle.commonFontText}>￥{utils.toDecimal2(productItem.nowPrice)}</Text>
                        <Text style={BasicStyle.commonFontText}>X {productItem.productNum}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        });

        return proListView;
    };

    /*订单信息*/
    _makeOrderView = (orderDedail) => {
        return <View style={{marginBottom: utils.autoheight(14)}}>
            <View style={{
                height: utils.autoheight(31),
                justifyContent: 'center',
                paddingLeft: utils.autoWidth(10)
            }}><Text style={{fontSize: utils.setSpText(14), color: '#888888'}}>订单信息</Text></View>
            <View>
                <View style={{
                    flexDirection: 'row',
                    height: utils.autoheight(44),
                    alignItems: 'center',
                    paddingLeft: utils.autoWidth(20),
                    marginBottom: utils.autoheight(0.5),
                    backgroundColor: '#FFF'
                }}>
                    <Text style={BasicStyle.commonFontLittleText}>订单号：</Text>
                    <TextInput style={[{flex: 1}, BasicStyle.commonFontLittleText]}underlineColorAndroid={'transparent'} editable={false}>{orderDedail.orderId}</TextInput>
                </View>

                <View style={{
                    flexDirection: 'row',
                    height: utils.autoheight(44),
                    alignItems: 'center',
                    paddingLeft: utils.autoWidth(20),
                    marginBottom: utils.autoheight(0.5),
                    backgroundColor: '#FFF'
                }}>
                    <Text style={BasicStyle.commonFontLittleText}>支付时间：</Text>
                    <TextInput style={[{flex: 1}, BasicStyle.commonFontLittleText]} underlineColorAndroid={'transparent'}
                               editable={false}>{orderDedail.createTimePlus}</TextInput>
                </View>

                <View style={{
                    flexDirection: 'row',
                    height: utils.autoheight(44),
                    alignItems: 'center',
                    paddingLeft: utils.autoWidth(20),
                    marginBottom: utils.autoheight(0.5),
                    backgroundColor: '#FFF'
                }}>
                    <Text style={BasicStyle.commonFontLittleText}>支付金额：</Text>
                    <TextInput style={[{flex: 1}, BasicStyle.commonFontLittleText]} underlineColorAndroid={'transparent'} editable={false}>
                        {orderDedail.orderStatus === 0 ? '0' : ''}
                        {orderDedail.orderStatus === 11 ? orderDedail.shopCarSumPrice : ''}
                        {orderDedail.orderStatus === 22 ? orderDedail.shopCarSumPrice : ''}
                        {orderDedail.orderStatus === 33 ? orderDedail.shopCarSumPrice : ''}
                        {orderDedail.orderStatus === 44 ? orderDedail.shopCarSumPrice : ''} 元</TextInput>
                </View>

                <View style={{
                    flexDirection: 'row',
                    height: utils.autoheight(44),
                    alignItems: 'center',
                    paddingLeft: utils.autoWidth(20),
                    marginBottom: utils.autoheight(0.5),
                    backgroundColor: '#FFF'
                }}>
                    <Text style={BasicStyle.commonFontLittleText}>订单状态：</Text>
                    <TextInput style={[{flex: 1}, BasicStyle.commonFontLittleText]} underlineColorAndroid={'transparent'} editable={false}>
                        {orderDedail.orderStatus === 0 ? '未支付' : ''}
                        {orderDedail.orderStatus === 11 ? '已支付' : ''}
                        {orderDedail.orderStatus === 22 ? '已发货' : ''}
                        {orderDedail.orderStatus === 33 ? '已收货' : ''}
                        {orderDedail.orderStatus === 44 ? '已完成' : ''}</TextInput>
                </View>
            </View>
        </View>
    }

}
